@charset "utf-8";

/* 
	父容器：
	1.溢出隐藏
	2.设置容器的内边距，用来空来位置放置左右2个边栏
 */
#wrapper{
	overflow:hidden;
	padding:0 200px;
	min-width:300px;
	border:1px solid #ccc;
}

/* 
	主体：
	1.宽度自适应
	2.浮动布局
 */
#wrapper .main{
	width:100%;
	height:300px;
	background:green;
	float:left;
}

/* 
	边栏：
	1.边栏宽度比容器内边距小10px，用来实现与主体隔开
	2.浮动布局
 */
#wrapper aside{
	width:190px;
	height:300px;
	background:blue;
	float:left;
	position:relative;
}

/* 
	左边栏
	1.移动到主内容位置：主内容自适应，宽度为100%，所以使用相对值100%
	2.再移动到左边，使用相对定位
 */
#wrapper .left{
	margin-left:-100%;
	left:-200px;
}

#wrapper .right{
	margin-left:-190px;
	left:200px;
}


